<template>
  <div class="add-coupon">
    <mt-header :title="title">
      <router-link to="/coupon" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>

    <div class="add-coupon-list">
      <mt-field label="优惠名称" placeholder="请输入优惠券名称" v-model="name"></mt-field>
      <mt-field label="领取次数" type="num" placeholder="请输入次券可被领取的次数" v-model="times"></mt-field>
      <div class="mj">
        <p class="title-p">满减条件</p>
        <div class="mj-input">
          <input type="text" placeholder="满..元" v-model="condition">
          <p>减</p>
          <input type="text" placeholder="减..元" v-model="fee">
        </div>
      </div>
      <div class="mj">
        <p class="title-p">有效时间</p>
        <div class="mj-input">
          <input type="text" placeholder="开始日期" :value="startdate" @click="showCalendar(1)">
          <p>到</p>
          <input type="text" placeholder="结束日期" :value="enddate" @click="showCalendar(2)">
          <calendar :show="calendarShow" format="yyyy-MM-dd" @selected="selectedHandler"></calendar>
        </div>
      </div>
      <mt-button class="btn-tj" type="primary" @click="tj">提交</mt-button>
    </div>

  </div>
</template>

<script>
import selected from 'components/common/selected.vue'
import uploadImg from 'components/common/uploadImg.vue'
import axios from 'axios'
import mySearch from 'components/common/mySearch.vue'
import Calendar from 'vue-m-calendar';
import { Toast } from 'mint-ui'
export default {
  data() {
    return {
      name: '',
      times: '',
      title: '添加优惠券',
      searchValue: '',
      imgUrl: '',
      category: [],
      categoryArr: [],
      catname: '请选择',
      couponid: 0,
      showsele: false,
      condition: '',
      fee: '',
      startdate: '',
      enddate: '',
      status: '',
      calendarShow: false,
    }
  },
  mounted() {

    this.couponid = this.$route.params.id
    if (this.couponid != 0) {
      this.title = "修改优惠券"
      let token = localStorage.getItem("access_token");
      let params = { "access_token": token, "coupon_id": this.couponid }
      axios.post(HOST + "/Shop/coupon_info", params).then((res) => {
        res = res.data
        let result = res.result
        if (result == 'success') {
          let info = res.data.info
          this.name = info.name
          this.times = info.times
          this.condition = info.condition
          this.fee = info.fee
          this.startdate = info.start_time_str
          this.enddate = info.end_time_str
        } else {
          Toast({
            message: res.message,
            position: 'bottom',
            duration: '2000'
          })
        }

      })
    }
    let token = localStorage.getItem("access_token");
    axios.post(HOST + "/Shop/get_category").then((res) => {
      res = res.data
      let result = res.result
      if (result == 'success') {
        this.showsele = true
        let arr = res.data.list
        for (let item of arr) {
          this.category.push(item)
          this.categoryArr.push(item.cnname)
        }
      } else {
        Toast({
          message: res.message,
          position: 'bottom',
          duration: '2000'
        })
      }
    })
  },
  methods: {
    showCalendar(style) {
      this.status = style;
      this.calendarShow = true;
    },
    selectedHandler(date) {
      this.calendarShow = false;
      if (this.status == 1) {
        this.startdate = date;
      } else {
        this.enddate = date
      }
    },
    selsectValue(msg) {
      this.catname = msg
      for (let sele of this.category) {
        if (msg == sele.cnname) {
          this.searchValue = sele.id
        }
      }

    },
    getImgurl(msg) {
      this.imgUrl = msg
    },
    tj() {

      if (this.couponid != 0) {
        //这是修改
        let token = localStorage.getItem("access_token");
        let params = {
          "access_token": token,
          "name": this.name,
          "times": this.times,
          "fee": this.fee,
          "condition": this.condition,
          "start_time": this.startdate,
          "end_time": this.enddate,
          "coupon_id": this.couponid
        }
        axios.post(HOST + "/Shop/init_coupon", params).then((res) => {
          res = res.data
          if (res.result == 'success') {
            this.$router.push('/coupon')
          } else {
            Toast({
              message: res.message,
              position: 'bottom',
              duration: '2000'
            })
          }
        })
      } else {
        //这是添加
        let token = localStorage.getItem("access_token");
        let params = {
          "access_token": token,
          "name": this.name,
          "times": this.times,
          "fee": this.fee,
          "condition": this.condition,
          "start_time": this.startdate,
          "end_time": this.enddate
        }
        axios.post(HOST + "/Shop/add_coupon", params).then((res) => {
          res = res.data
          if (res.result == 'success') {
            this.$router.push('/coupon')
          } else {
            Toast({
              message: res.message,
              position: 'bottom',
              duration: '2000'
            })
          }
        })
      }
    }
  },
  components: {
    mySearch,
    uploadImg,
    selected,
    Calendar
  }
}
</script>

<style lang="stylus">
.add-coupon
  background:#f2f2f2
  height:100%
  width:100%
  position:absolute
  top:0
  left:0
  z-index:10
  .mint-header
    color:rgb(104, 104, 104)
    background:#26a2ff
    border-bottom:1px solid #ccc
    font-size:18px
    letter-spacing:2px
    box-shadow: 1px 3px 5px #eee
    color:#fff
    height 44px
    label,span
      color:#fff
  .add-coupon-list
    .mj
      display: flex
      background: #fff
      border-bottom: 1px solid #f1f1f1
      padding 0 10px
      .title-p
        flex: 0 0 105px
        padding-top: 10px
        color: #111
      .mj-input
        flex: 1
        display: flex
        p
          line-height:40px
          color:#f00
          flex: 0 0 50px
          text-align: center
        input
          min-height: 40px
          height: 40px
          border-bottom: none
          width:100px
          text-align:left
    .btn-tj
      margin:20px 5%
      width:90%
    .mint-field 
      border-bottom:1px solid #f1f1f1

</style>